/* eslint-disable space-before-blocks */
<template>
  <div id="home">
    <el-row :gutter="20">

      <el-col :span="8">
        <!-- 快速进行入住登记和退房结账 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>快捷操作</span>
          </div>
          <el-button
            type="primary"
            @click="dialogFormVisible = true"
          >入住登记</el-button
          >
          <el-button
            type="primary"
            @click="checkOutFormVisible = true"
          >退房结账</el-button>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>当前日期</span>
          </div>
          <p>{{ new Date() | formatDay }}</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>数据展示</span>
          </div>
          <div>
            系统已注册用户人数： <el-tag>{{ userCount }}</el-tag>
          </div>
          <div>
            系统已接受订单数量： <el-tag>{{ orderCount }}</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>客房住宿率</span>
          </div>
          <div id="liveRate" style="left: 0; width: 100%; height: 250px" />
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>房型比例</span>
          </div>
          <div id="roomType" style="left: 0; width: 100%; height: 250px" />
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>订单量</span>
          </div>
          <div id="order" style="left: 0; width: 100%; height: 250px" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>各类型客房订单比例</span>
          </div>
          <div id="orderType" style="left: 0; width: 100%; height: 250px" />
        </el-card>
      </el-col>
    </el-row>
    <!-- 入住登记的表单 -->
    <el-dialog :visible.sync="dialogFormVisible" title="入住登记">
      <el-form :model="form" inline>
        <el-form-item label="预订人姓名">
          <el-input v-model="form.name" auto-complete="on" />
        </el-form-item>
        <el-form-item label="预留手机号">
          <el-input v-model="form.phone" auto-complete="on" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="findOrder()">查询</el-button>
        </el-form-item>
      </el-form>
      <div v-if="isOrderShown && order != null">
        订单号：{{ order.orderId }}<br >
        预订方式： {{ order.orderType }}<br >
        预订房型： {{ order.roomType }}<br >
        预订日期： {{ order.orderDate | formatDay }}<br >
        预订天数： {{ order.orderDays }}天<br >
        预订费用： {{ order.orderCost }}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelIn()">取 消</el-button>
        <el-button type="primary" @click="myCheckIn()">确定入住</el-button>
      </div>
    </el-dialog>

    <!-- 退房结账的表单 -->
    <el-dialog :visible.sync="checkOutFormVisible" title="退房结账">
      <el-form :model="form" inline>
        <el-form-item label="房间号">
          <el-input v-model="checkOutForm.roomNumber" auto-complete="on" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelOut()">取 消</el-button>
        <el-button type="primary" @click="myCheckOut()">确定退房</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getOrderByNameAndPhone, getOrderCount } from '../../api/order'
import { getUserCount } from '../../api/user'
import { checkIn, checkOut } from '../../api/checkIn'
import { pieFromRoomType, pieFromOrder, axisFromOrder } from '../../api/echars'

export default {
  name: 'Home',
  data() {
    return {
      roomNumber: null,
      // 入住登记的表单是否显示
      dialogFormVisible: false,
      // 退房结账的表单是否显示
      checkOutFormVisible: false,
      userCount: 1203,
      orderCount: 12032,
      // 入住登记的搜索表单
      form: {
        name: '',
        phone: ''
      },
      // 退房结账的搜索表单
      checkOutForm: {
        roomNumber: ''
      },
      isOrderShown: false,
      order: null,
      // 房间类型饼图数据
      pieFromRoomData: null,
      // 订单饼图数据
      pieFromOrderData: null,
      // 每个月订单数量条形图数据
      axisFromOrderData: null
    }
  },
  created: function() {
    this.getCount()

  },
  // 加载图形
  mounted() {
    this.fetchData()
    console.log('饼图数据1: ' + JSON.stringify(this.pieFromRoomData))
    this.rtChart()
    this.lrChart()
    this.orderChart()
    this.ortChart()
  },
  methods: {
    // 获得一些数据图数据
    fetchData() {
      pieFromRoomType().then((res) => {
        this.pieFromRoomData = res.data
      }).then((x) => {
        this.rtChart()
      })

      pieFromOrder().then((res) => {
        this.pieFromOrderData = res.data
      }).then((x) => {
        this.ortChart()
      })

      axisFromOrder().then((res) => {
        this.axisFromOrderData = res.data
      }).then((x) => {
        this.orderChart()
      })
    },

    // 获得数量
    getCount() {
      getUserCount().then((response) => {
        this.userCount = response.data
      })
      getOrderCount().then((res) => {
        this.orderCount = res.data
      })
    },
    // 房型比例
    rtChart() {
      var rtChart = this.$echarts.init(
        document.getElementById('roomType'),
        'light'
      )
      rtChart.setOption({
        tooltip: {},
        series: [
          {
            name: '比例',
            type: 'pie',
            radius: '55%',
            data: this.pieFromRoomData
          }
        ]
      })
    },
    // 客房入住率
    lrChart() {
      var myChart = this.$echarts.init(
        document.getElementById('liveRate'),
        'light'
      )
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            formatter: '{value} 月'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          }
        },
        series: [
          {
            data: [
              50, 68, 55.4, 53.2, 76.6, 80.6, 47.6, 45.7, 67.2, 58.3, 78.4,
              94.2
            ],
            type: 'line'
          }
        ]
      })
    },
    // 订单量
    orderChart() {
      var myChart = this.$echarts.init(
        document.getElementById('order'),
        'light'
      )
      myChart.setOption({
        itemStyle: {
          color: '#409EFF'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
          axisLabel: {
            formatter: '{value} 月'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 单'
          }
        },
        series: [
          {
            name: '订单量',
            data: this.axisFromOrderData,
            type: 'bar'
          }
        ]
      })
    },
    // 订单饼图
    ortChart() {
      var rtChart = this.$echarts.init(
        document.getElementById('orderType'),
        'light'
      )
      // 设置选项
      rtChart.setOption({
        tooltip: {},
        series: [
          {
            name: '比例',
            type: 'pie',
            radius: '55%',
            data: this.pieFromOrderData
          }
        ]
      })
    },
    // 入住登记之前根据用户的姓名和手机号去查询订单信息
    findOrder() {
      console.log('from:', JSON.stringify(this.form))
      // 使用get方法来访问这个请求
      // getOrderByNameAndPhone('op/order/withNameAndPhone',this.formx).then((res) => {
      this.$api.get('op/order/withNameAndPhone', this.form).then((res) => {
        console.log('res:', res)
        this.order = res.data
      })
      if (this.order == null) {
        this.$message.warning('找不到相关预订信息！请检查')
        return
      } else {
        this.isOrderShown = true
      }
    },
    // eslint-disable-next-line space-before-blocks
    // 取消入住登记
    cancelIn() {
      this.dialogFormVisible = false
      this.order = null
      this.isOrderShown = false
    },
    // 入住登记
    myCheckIn() {
      this.dialogFormVisible = false
      console.log('this.data:', JSON.stringify(this.$data))
      console.log('order:', this.$data.order)
      const checkInReq = {
        orderId: this.$data.order.orderId,
        peoCount: this.userCount,
        userId: this.$data.order.userId
        // ids:
      }
      checkIn(checkInReq)
      this.order = null
      this.isOrderShown = false
    },
    // 取消退房结账
    cancelOut() {
      this.checkOutFormVisible = false
    },
    // 退房结账
    myCheckOut() {
      this.checkOutFormVisible = false
      const checkOutReq = {
        roomNumber: this.checkOutForm.roomNumber
      }
      checkOut(checkOutReq).then((res) => {
        if (res.code === 1000) {
          this.$message.success('退房成功')
        } else {
          this.$message.error(res.data)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-row {
  margin: 10px 5px;
}
.el-card {
  text-align: center;
}
</style>
